<template>
	<view class="layout">
		<view class="head">
			<view class="title">
			{{title}}<text class="required">*</text>
			</view>
		</view>
		<view class="body">
			<view class="area">
				<!-- <view class="name">地区：</view> -->
				<view class="selectItem" @click="openCityPicker">
					<input placeholder="请选择省市区" readonly style="pointer-events: none;" type="text" v-model="addressData.address" />
				</view>
			</view>
			<!-- <view class="line"></view> -->
			<view class="detail">
				<!-- <view class="name">地址：</view> -->
				<view class="selectItem">
					<input v-model="addressData.moreAddres" @blur="onCommitDetail"
						placeholder="输入详细地址" v-if="show == false" maxlength="10">
					</input>
				</view>
			</view>

		</view>
	</view>
	
	<!-- 省市区选择 province city area初始省市区设置 show:是否显示  @sureSelectArea：确认事件 @hideShow：隐藏事件-->
	<cc-selectDity :province="province" :city="city" :area="area" :show="show" @changeClick="changeClick"
		@sureSelectArea="onsetCity" @hideShow="onhideShow"></cc-selectDity>
</template>

<script setup>
	import {ref} from 'vue';
	const props = defineProps({
		title: {
			type: String,
			default: "到哪去"
		},
		province: {
			type: String,
			default: "广东省"
		},
		city: {
			type: String,
			default: "广州市"
		},
		area: {
			type: String,
			default: "天河区"
		},	
		areaCode: {
			type: String,
			default: "440118"
		},				
	})
	console.log(props.province, props.city, props.area);
	const emit = defineEmits(["selectArea", "selectDetail"])
	

	const show = ref(false)
	const addressData = ref({})
	const province = ref(props.province)
	const city = ref(props.city)
	const area = ref(props.area)
	const areaCode = ref(props.areaCode);
	
	// 填写详细地址完成
	const onCommitDetail = (e) => {
		emit("selectDetail", e.detail.value)
	}

	const openCityPicker = () => {
		// console.log('打开城市选择器');
		show.value = true
		// 在这里实现打开城市选择器的逻辑
		// 例如：显示一个城市选择弹窗，或者跳转到城市选择页面
	};
	
	const onhideShow = () => {
		show.value = false
		// console.log('执行了关闭地址选择器')
	}
	
	// 选中省市区
	const onsetCity = (e) => {
	    let data = e.detail.target.dataset;
	    let address = data.province + data.city + data.area;
	    show.value = false; 
	    addressData.value.address = address;
		// console.log("选择市区", address);
		// emit("selectArea", city.value+area.value)	
		emit("selectArea", address)
	};
	
	const changeClick = (value, value2, value3, value4) => {
	    // console.log('地址选择器滚动 = ' + value + value2 + value3 + value4);
	
	    province.value = value;
	    city.value = value2;
	    area.value = value3;
	    areaCode.value = value4;
	};
</script>

<style lang="scss" scoped>
	.layout {
		.head {
			// padding: 20rpx 0;

			.title {
				font-size: 34rpx;
				padding-left: 20rpx;
				position: relative;
				padding-bottom: 6rpx;
				.required{
					color: #f00;
					margin-left: 4rpx;
				}

				&::before {
					content: "";
					display: block;
					width: 8rpx;
					height: 30rpx;
					background: $brand-theme-color;
					position: absolute;
					left: 0;
					top: calc(50% - 15rpx);
					border-radius: 10rpx;
				}
			}
		}

		.body {
			// display: flex;
			width: 70%;
			height: 120rpx;
			margin-left: 20rpx;
			padding: 5rpx 10rpx 5rpx 0;
			border-radius: 10rpx;
			font-size: $text-font-size-input;
			font-weight: 400;

			.area {
				width: 100%;
				height: 60rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;				
				.name {
					width: 100rpx;
					white-space: nowrap;					
				}

				.selectItem {	
					background: #f3f3f3;
					padding: 2rpx 20rpx;	
					width: 350rpx;
					height: 45rpx;
					border-radius: 10rpx;
					border: 1rpx solid #70708a;
					// 添加以下样式使文字居中
					display: flex;
					justify-content: center;  /* 水平居中 */
					align-items: center;      /* 垂直居中 */
					line-height: 45rpx;      /* 确保单行文本垂直居中 */
				}
			}

			.line {
				width: 100%;
				height: 3rpx;
				background: #fff;
				margin: 10rpx 0;
			}

			.detail {
				width: 100%;
				height: 40rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center; /* 左对齐 */	

				.name {
					width: 100rpx;
					white-space: nowrap;
				}

				.selectItem {
					background: #f3f3f3;
					padding: 2rpx 20rpx;	
					width: 350rpx;
					height: 45rpx;
					border-radius: 10rpx;	
					border: 1rpx solid #70708a;
					// 添加以下样式使文字居中
					display: flex;
					justify-content: center;  /* 水平居中 */
					align-items: center;      /* 垂直居中 */
					line-height: 45rpx;      /* 确保单行文本垂直居中 */
				}
			}
		}
	}
</style>